<template>
  <!-- <div> -->
  <div id="echatsMap" style="width: 100%; height: 800px"></div>
  <!-- </div> -->
</template>

<script>
  import * as echarts from 'echarts'
  import axios from 'axios'
  import { cityCode } from '@/assets/map/cityCode.js'
  export default {
    name: 'echatsMap',
    components: {},
    data() {
      return {
        cityCode: cityCode,
        myChart: '',
        distributionOptions: '',
        geographicalCoordinates: [
          {
            name: '荆州市',
            adcode: '421000',
            value: [112.239741, 30.335165],
            chiidren: [{ name: '公安县', adcode: '420325', value: [112.230407, 30.058336] }]
          }
        ],
        geoCounty: false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      // 初始化地图数据
      init() {
        // 主地图的JSON文件下载
        let path = `https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json`
        axios.get(path).then((res) => {
          echarts.registerMap('湖北省', res.data)
          this.changeOptions('湖北省')
          this.myChart = echarts.init(document.querySelector('#echatsMap'))
          this.myChart.setOption(this.distributionOptions)
          // 点击省份子区域的时候可以切换到省份地图
          this.myChart.on('click', (chinaParam) => {
            // 如果没有下层则展示主地图
            if (!this.cityCode) {
              this.cityCode = cityCode
              // 420000 主地图
              this.geoCounty = false
              this.getProvinceMapOpt(420000, '')
              return
            }
            // 根据点击位置地图名字去跟编码数据匹配
            let code = this.cityCode.find((x) => chinaParam.name.indexOf(x ? x.name : '') !== -1)
            // console.log(chinaParam.name,'---',code);
            // 找到正确的编码   去获取对应的地图数据
            // 将该省市区的下级放入 -- 如果接口支持根据编码查询省市区所有下级子级就不需要这么写
            if (code) {
              // 判断是否请求到了县级别
              if (!this.geoCounty) {
                this.getProvinceMapOpt(Number(code.adcode), chinaParam.name)
              } else {
                // this.getProvinceMapOptCounty(Number(code.adcode), chinaParam.name);
                // 已经没有再下层的数据了，再点击返回主视图
                this.cityCode = cityCode
                // 420000 主地图
                this.geoCounty = false
                this.getProvinceMapOpt(420000, '湖北省')
              }
            } else {
              // 没有对应的编码跳主地图
              this.cityCode = cityCode
              // 420000 主地图
              this.geoCounty = false
              this.getProvinceMapOpt(420000, '湖北省')
            }
          })
        })
        window.onresize = function () {
          if (this.myChart) this.myChart.resize()
        }
      },
      // 下载/显示各省地图
      getProvinceMapOpt(provinceAlphabet, name) {
        console.log(provinceAlphabet)
        // 根据地区编码获取所在地区的JSON地图
        let path = `https://geo.datav.aliyun.com/areas_v3/bound/${provinceAlphabet}_full.json`
        // if (provinceAlphabet === 420000) {
        //   path = "/mapJson/china.json";
        // }
        axios
          .get(path)
          .then((res) => {
            // 获取完最新的JSON地图数据后，重新渲染
            echarts.registerMap(name, res.data)
            this.changeOptions(name)
            this.myChart.setOption(this.distributionOptions, true)
          })
          .catch((error) => {
            this.geoCounty = true
            // 请求出错时的处理逻辑 - 此时有可能是请求到县了，县的请求地址跟其他层级请求地址不一样
            this.getProvinceMapOptCounty(provinceAlphabet, name)
            // console.error('请求出错:', error);
          })
      },
      // 获取县级别的地图数据
      getProvinceMapOptCounty(provinceAlphabet, name) {
        // 根据地区编码获取所在地区的JSON地图
        let path = `https://geo.datav.aliyun.com/areas_v3/bound/${provinceAlphabet}.json`
        axios
          .get(path)
          .then((res) => {
            // 获取完最新的JSON地图数据后，重新渲染
            echarts.registerMap(name, res.data)
            this.changeOptions(name)
            this.myChart.setOption(this.distributionOptions, true)
          })
          .catch((error) => {
            // 请求出错时的处理逻辑 - 此时有可能是请求到县了，县的请求地址跟其他层级请求地址不一样
            console.error('请求出错:', error)
          })
      },
      // echarts 配置项
      changeOptions(name) {
        // 根据行政编码 adcode 值判断当前点位是否在此图层上 - 只有为主地图时才进行判断
        const geographicalLocation = this.geographicalCoordinates
        // 经纬度数据  --- 不存在的经纬度不会展示出来
        const seriesList = [
          {
            data: geographicalLocation
          }
        ]
        // 图标
        const series = seriesList.map((v) => {
          return {
            type: 'scatter', //配置显示方式为用户自定义
            coordinateSystem: 'geo',
            data: v.data,
            // 自定义图标的样式  支持svg与bse64
            // symbol: function (params, key) {
            //   return 'image://' + require('@/assets/logo.png')
            // },
            symbolSize: 16,
            tooltip: {
              trigger: 'item',
              // show:false,
              formatter: function (params) {
                // 自定义 tooltip 内容
                return `名称:${params.data.name}<br/>坐标:<br/>经度:${params.data.value[0]}<br/>纬度:${params.data.value[1]}`
              }
            },
            clickable: true, // 允许点击
            events: {
              click: function (params) {
                // 点击事件处理函数
                console.log('点击了图标:', params.data.name)
                // 在这里可以根据点击的图标执行相应的操作
              }
            }
          }
        })

        // options
        this.distributionOptions = {
          tooltip: {},
          series, // 数据
          geo: {
            map: name || '湖北省', // 引入地图 省份或者 国家
            layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
            layoutSize: '55%',
            roam: true, //开启鼠标缩放
            zoom: 2,
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: '#000',
                  fontSize: 10,
                  fontFamily: 'Arial'
                }
              },
              emphasis: {
                // 高亮状态下的样式
                //动态展示的样式
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(128, 217, 248, 1)',
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            regions: [
              //对不同的区块进行着色
              // {
              //   name: "河南省", //区块名称
              //   itemStyle: {
              //     normal: {
              //       areaColor: "#281fe1",
              //     },
              //   },
              // },
              // {
              //   name: "浙江省", //区块名称
              //   itemStyle: {
              //     normal: {
              //       areaColor: "#193094",
              //     },
              //   },
              // },
            ]
          }
        }
      }
    }
  }
</script>
